<template>
	<div>
		<el-dialog :title="$t('action.add')" width="70%" class="icon-dialog" :visible.sync="show" @open="open" :before-close="closeForm" append-to-body>
			<el-form :size="size" ref="form" :model="form" :rules="rules" :label-width="$store.getters.device !== 'mobile'?'16%':'90px'">
			<el-tabs v-model="activeName">
				<el-tab-pane style="padding-top:10px"  label="基本信息" name="基本信息">
 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Test_title')" prop="title">
							<el-input v-model="form.title" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.Test_title')})"></el-input>
						</el-form-item>
					</el-col>
				 </el-row>
	 				 <el-row >
				   <el-col :span="24">
                        <el-form-item :label="$t('field.Test_dropdown_int')" prop="dropdown_int">
                            <el-select style="width:100%" v-model="form.dropdown_int" :size="size" clearable filterable :placeholder="$t('system.pleaseSelect')">
                                <el-option key="0"  label="Apple" :value="1"></el-option>
                                <el-option key="1"  label="Banana" :value="2"></el-option>
                                <el-option key="2"  label="pineapple" :value="3"></el-option>
                                <el-option key="3"  label="melon" :value="4"></el-option>
                            </el-select>
                        </el-form-item>
                   </el-col>
				 </el-row>
	 				 <el-row >
				   <el-col :span="24">
                        <el-form-item :label="$t('field.Test_dropdown_char')" prop="dropdown_char">
                            <el-select style="width:100%" v-model="form.dropdown_char" :size="size" clearable filterable :placeholder="$t('system.pleaseSelect')">
                                <el-option key="0"  label="Dog" value="1"></el-option>
                                <el-option key="1"  label="Cat" value="2"></el-option>
                                <el-option key="2"  label="Pig" value="3"></el-option>
                                <el-option key="3"  label="Goose" value="4"></el-option>
                            </el-select>
                        </el-form-item>
                   </el-col>
				 </el-row>
	 				 <el-row >
                        <el-form-item :label="$t('field.Test_dropdown_mult')" prop="dropdown_mult">
                            <el-select multiple style="width:100%" v-model="form.dropdown_mult" :size="size" clearable filterable :placeholder="$t('system.pleaseSelect')">
                                <el-option key="0"  label="House" value="1"></el-option>
                                <el-option key="1"  label="Apartment" value="2"></el-option>
                                <el-option key="2"  label="Mansion" value="3"></el-option>
                                <el-option key="3"  label="Container" value="4"></el-option>
                                <el-option key="4"  label="Hotel" value="5"></el-option>
                                <el-option key="5"  label="Vila" value="6"></el-option>
                            </el-select>
                        </el-form-item>
				 </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Test_image_single')" prop="image_single">
							<ImagesUpload size="small"  uploadType="2" fileType="image" :image.sync="form.image_single"></ImagesUpload>
						</el-form-item>
					</el-col>
				 </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Test_image_multi')" prop="image_multi">
							<ImagesUpload size="small"  fileType="images" :images.sync="form.image_multi"></ImagesUpload>
						</el-form-item>
					</el-col>
				 </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Test_file_single')" prop="file_single">
							<ImagesUpload size="small" fileType="file"  :file.sync="form.file_single"></ImagesUpload>
						</el-form-item>
					</el-col>
				 </el-row>
	 			<el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Test_file_multi')" prop="file_multi">
							<ImagesUpload size="small" fileType="files" :files.sync="form.file_multi"></ImagesUpload>
						</el-form-item>
					</el-col>
				 </el-row>
					</el-tab-pane>
				<el-tab-pane style="padding-top:10px"  label="富文本" name="富文本">
 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Test_tiny_editor')" prop="tiny_editor">
							<TinymceEditor v-if="show" tinymceId="tiny_editor"  :tinymceContent.sync="form.tiny_editor"></TinymceEditor>
						</el-form-item>
					</el-col>
				 </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Test_mark_editor')" prop="mark_editor">
							<MdEditor v-if="show"  :mdContent.sync="form.mark_editor"></MdEditor>
						</el-form-item>
					</el-col>
				 </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Test_wang_editor')" prop="wang_editor">
							<WangEditor v-if="show"  :isClear="isClear" :wangEditorContent.sync="form.wang_editor"></WangEditor>
						</el-form-item>
					</el-col>
				 </el-row>
					</el-tab-pane>
				<el-tab-pane style="padding-top:10px"  label="其他信息" name="其他信息">
 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Test_keyvalue_pair')" prop="keyvalue_pair">
							<draggable v-model="form.keyvalue_pair" v-bind="{group:'item'}" handle=".keyvalue_pair-handle">
							<el-row v-for="(item,i) in form.keyvalue_pair" :key="i">
								<el-col :span="10">
									<el-form-item class="activeItem">
										<el-input  v-model="item.key" placeholder="选项名称"/>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item class="activeItem">
										<el-input style="position:relative;left:5px;" v-model="item.val" placeholder="选项值"/>
									</el-form-item>
								</el-col>
								<el-col :span="4">
									<el-button type="danger" size="mini" style="position:relative;left:15px"  icon="el-icon-close" @click="deleteItem('keyvalue_pair',i)"></el-button>
									<el-button class="keyvalue_pair-handle" type="success" size="mini" style="position:relative;left:15px" icon="el-icon-rank"></el-button>
								</el-col>
							</el-row>
							</draggable>
							<div>
								<el-button type="info" icon="el-icon-plus" style="padding:5px 7px" size="mini" @click="addItem('keyvalue_pair')">追加</el-button>
								<el-button v-if="form.keyvalue_pair.length > 0" type="warning" icon="el-icon-delete" style="padding:5px 7px" size="mini" @click="clearItem('keyvalue_pair')">清空</el-button>
							</div>
						</el-form-item>
					</el-col>
				 </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Test_address')" prop="address">
							<el-cascader style="width:100%" clearable v-model="form.address" :options="threeAddressOptions"></el-cascader>
						</el-form-item>
					</el-col>
				 </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Test_status')" prop="status">
							<el-switch :active-value="0" :inactive-value="1" v-model="form.status"></el-switch>
						</el-form-item>
					</el-col>
				 </el-row>
	 				<el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Test_tag_label')" prop="tag_label">
							<draggable v-model="form.tag_label" v-bind="{group:'item'}" handle=".tag_label-handle">
							<el-row v-for="(item,i) in form.tag_label" :key="i">
								<el-col :span="6">
							    <el-form-item class="activeItem">
									<el-input  v-model="item.Id" placeholder="识别ID"/>
								</el-form-item>
								</el-col>
								<el-col :span="6">
							    <el-form-item class="activeItem">
									<el-input style="position:relative;left:5px;" v-model="item.Label" placeholder="标题"/>
								</el-form-item>
								</el-col>
								<el-col :span="6">
							    <el-form-item class="activeItem">
									<el-input style="position:relative;left:5px;" v-model="item.Rate" placeholder="赔率"/>
								</el-form-item>
								</el-col>
								<el-col :span="4">
									<el-button type="danger" size="mini" style="position:relative;left:15px"  icon="el-icon-close" @click="deleteItem('tag_label',i)"></el-button>
									<el-button class="tag_label-handle" type="success" size="mini" style="position:relative;left:15px" icon="el-icon-rank"></el-button>
								</el-col>
							</el-row>
							</draggable>
							<div>
								<el-button type="info" icon="el-icon-plus" style="padding:5px 7px" size="mini" @click="addItem('tag_label')">{{$t('action.add')}}</el-button>
								<el-button v-if="form.tag_label.length > 0" type="warning" icon="el-icon-delete" style="padding:5px 7px" size="mini" @click="clearItem('tag_label')">{{$t('action.clear')}}</el-button>
							</div>
						</el-form-item>
					</el-col>
				 </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Test_number_updown')" prop="number_updown">
							<el-input-number controls-position="right" style="width:200px;" autoComplete="off" v-model="form.number_updown" clearable :min="0" placeholder="计数器"/>
						</el-form-item>
					</el-col>
				 </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.Test_oper_time')" prop="oper_time">
							<el-date-picker type="date" v-model="form.oper_time" clearable placeholder="请输入操作时间"></el-date-picker>
						</el-form-item>
					</el-col>
				 </el-row>
					</el-tab-pane>
			</el-tabs>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button :size="size" :loading="loading" type="primary" @click="submit" >
					<span v-if="!loading">{{$t('system.confirm')}}</span>
					<span v-else>{{$t('system.submitting')}}</span>
				</el-button>
				<el-button :size="size" @click="closeForm">{{$t('system.cancel')}}</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import { add } from '@/api/admin/test'
import ImagesUpload from '@/components/common/ImagesUpload.vue'
import draggable from "vuedraggable"
import WangEditor from '@/components/editor/WangEditor.vue'
import TinymceEditor from '@/components/editor/TinymceEditor.vue'
import MdEditor from '@/components/editor/MdEditor.vue'
import threeAddressOptions from '@/utils/city-data-level3.js'


export default {
	name:'testadd',
	components: {
	   		ImagesUpload,
	   		draggable,
	   		WangEditor,
	   		TinymceEditor,
	   		MdEditor,
	},
	props: {
		show: {
			type: Boolean,
			default: false
		},
		size: {
			type: String,
			default: 'small'
		},
	},
	data(){
		return {
			form: {
			   title:'',
			   dropdown_int:'',
			   dropdown_char:'',
			   dropdown_mult:[],
			   image_single:'',
			   image_multi:[],
			   file_single:'',
			   file_multi:[],
			   tiny_editor:'',
			   mark_editor:'',
			   wang_editor:'',
			   keyvalue_pair:[],
			   address:[],
			   status:'',
			   tag_label:[],
			   number_updown:'',
			   oper_time:'',
			},
			threeAddressOptions:threeAddressOptions,
		    isClear:false,  
			loading:false,
			activeName:'基本信息',
			rules: {
			}
		}
	},
	watch:{
		show(val){
			if(val){
			}
		}
	},
	methods: {
		open(){
		},
		submit(){
			this.$refs['form'].validate(valid => {
				if(valid) {
					this.loading = true
					add(this.form).then(res => {
						if(res.status == 200){
							this.$message({message: '操作成功', type: 'success'})
							this.$emit('refresh_list')
							this.closeForm()
						}
					}).catch(()=>{
						this.loading = false
					})
				}
			})
		},
		addItem(key){
			this.form[key].push({})
		},
		deleteItem(key,index){
			this.form[key].splice(index,1)
		},
		clearItem(key){
			this.form[key] = []
		},
		closeForm(){
			this.$emit('update:show', false)
			this.loading = false
			if (this.$refs['form']!==undefined) {
				this.$refs['form'].resetFields()
			}
		},
	}
}
</script>
<style scoped lang="scss">
@import '@/assets/scss/common.scss'
</style>
